<template>
  <div class="table-list">
    <el-table
      :data="songList"
      stripe
      :header-row-style="headObj"
      :header-cell-class-name="haedCell"
      class="mytable"
      :show-header="!isAlbum || isplayer"
      @row-dblclick="toPlay"
    >
      <el-table-column label="" width="80">
        <!-- 下标 -->
        <template slot-scope="scope">
          <div>
            <div
              v-show="currentIndex != scope.$index && nowIndex !== scope.$index"
            >
              {{
                scope.$index + 1 < 10
                  ? '0' + (scope.$index + 1)
                  : scope.$index + 1
              }}
            </div>
            <div
              v-show="currentIndex == scope.$index || nowIndex == scope.$index"
            >
              <i class="iconfont icon-V" :class="`v-${theme}`"></i>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <!-- 图片自定义渲染 -->
        <template slot-scope="scope" v-if="!isplayer">
          <div class="img_wrap" v-if="!isAlbum">
            <img v-lazy="scope.row.pic" alt="" />
            <i class="iconfont icon-icon_play"></i>
          </div>
          <div v-if="isAlbum">
            <i class="el-icon-star-on"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="音乐标题" prop="name"></el-table-column>
      <el-table-column
        label="歌手"
        v-if="!isAlbum"
        prop="arist"
      ></el-table-column>
      <el-table-column label="专辑" prop="album"></el-table-column>
      <el-table-column label="时长" prop="time" width="200"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { theme } from '../../mixin/global/theme'
export default {
  mixins: [theme],
  props: {
    songList: {
      type: Array,
      defalut: []
    },
    isAlbum: {
      //是不是歌手
      type: Boolean,
      defalut: false
    },
    isplayer: {
      //播放列表
      type: Boolean,
      defalut: false
    },
    nowIndex: {
      type: Number
    }
  },

  data () {
    return {
      currentIndex: null,
      playId: false,
      headObj ({ row, rowIndex }) {
        //
        // console.log(row)
        // console.log(rowIndex)
        if (rowIndex == 0) {
          console.log('你好')
          return {
            background: '#ff0000'
          }
        }
      },
      haedCell ({ row, column, rowIndex, columnIndex }) {
        console.log(columnIndex)
        return 'myred'
      }
    }
  },
  beforeMount () {
    // 监听自己传开的下标
    this.$bus.$on('setindex', index => {
      this.currentIndex = index
    })
  },
  methods: {
    // 去播放
    toPlay (row, column, event) {
      console.log(row, column, event)
      //找到当前歌曲 在列表中的下标
      this.currentIndex = this.songList.findIndex(item => row.id == item.id)

      console.log(this.currentIndex)
      // 去播放                     //歌曲id       下标                歌曲列表
      this.$bus.$emit('playMusic', row.id, this.currentIndex, this.songList)

      // 传递当前下标 给自身组件
      this.$bus.$emit('setindex', this.currentIndex)
    }
  },
  name: 'song-list'
}
</script>
<style lang="less">
.table-list {
  width: 100%;
  padding: 10px 30px 0 30px;
}
.myred {
  background: #f7f7f7 !important;
  color: black;
}
.mytable {
  width: 100%;
}
.img_wrap {
  width: 80px;
  height: 80px;
  position: relative;
  margin: 10px auto;
  img {
    width: 80%;
    height: 80%;
    margin: 10% auto;
  }
  i {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    left: -10px;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 30px;
    color: red;
  }
}
.v {
  font-size: 28px;
  &-green {
    color: var(--green-main-color);
  }
  &-dark {
    color: var(--main-color);
  }
  &-light {
    color: var(--primary);
  }
}
</style>
